<template>
  <div class="view-index-wrap">
    <div class="view-index" :class="[navMenuState ? 'navMenuState' : '']">
      <sidebar-nav :subNavState="subNavState"></sidebar-nav>
      <called-bar></called-bar>
      <!--全局播放录音的audio-->
      <audio :src="recordFile" style="display:none" id="m7audio_hide" ref="audioRef" :autoplay="false"></audio>
      <div class="nav-box">
        <div class="content-box">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
    <div class="versionTip" id="versionTip">
      <i class="V7_iconfont V7_iconV7tubiao_zhongyaoxiaoxi" style="font-size:14px;margin-right:8px"></i>
      <span id="versionTipText">尊敬的用户，由于系统刚刚发布了新版本，为保证您的正常使用，请您立即保存当前工作，重新登录系统或点击右侧的刷新按钮后，新功能才会生效，非常感谢您的配合！</span>
      <i style="float:right;font-size:14px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_shuaxin" @click="reload"></i>
    </div>
  </div>
</template>
<script lang="ts">
import sidebarNav from '@components/nav/index.vue'
import calledBar from '@components/publicTop/index.vue'
import { Component, Vue } from 'vue-property-decorator'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'Main',
  components: { sidebarNav, calledBar }
})
export default class Main extends Vue {
  private $store: any
  private subNavState: boolean = true
  public get navMenuState (): boolean {
    return CommonModule.navMenuState || false
  }

  private openNavMenu () {
    this.subNavState = !this.subNavState
  }

  get recordFile () {
    const audioObj = this.$store.state.common.audioObj
    return audioObj ? audioObj.audioUrl : ''
  }

  private mounted () {
    window.onbeforeunload = (e) => {
      if (this.$store.state.common.isSignOut) { // 主动退出，不提醒
        console.log('主动退出')
      } else {
        e = e || window.event
        if (e) {
          e.returnValue = '系统可能不会保存您所做的更改'
        }
        return '系统可能不会保存您所做的更改'
      }
    }
    if (localStorage.getItem('refresh') && localStorage.getItem('refresh') === 'yes') {
      // @ts-ignore
      document.querySelector('.huidu').style.display = 'block'
    }
  }

  private reload () {
    window.onbeforeunload = null
    location.reload()
  }
}
</script>
<style lang="stylus" scoped>
  .view-index-wrap
    background $bgc-gray
  .view-index
    width 100%
    box-sizing border-box
    background #fff
    height calc(100vh - 56px)
    margin 55px 0 0 72px
    box-shadow inset 0px 0px 2px 1px rgba(220,232,241,0.7), 0px 0px 2px 1px rgba(220,232,241,0.7)
    border-radius 18px
  .nav-box
    width calc(100vw - 68px)
    height calc(100vh - 56px)
    position relative
    .content-box
      width 100%
      height 100%
      box-sizing border-box
      padding 16px
  .nav-animation
    transition all 0.2s
  .view-index.navMenuState
    margin 55px 0 0 133px
    .nav-box
      width calc(100vw - 120px)
  .huidu
    position: fixed
    bottom 10px
    right 10px
    padding: 10px 20px
    font-size: 14px
    background: #008cee
    color #fff
    box-shadow: 0 0 10px rgba(0,0,0,.2)
    display: none
    cursor pointer
  .versionTip
    position: fixed
    top 0
    left: 0
    width: 100%
    background: $c-main
    color: #fff
    font-size: 14px
    line-height: 55px
    z-index 100
    padding: 0px 24px
    display: none

</style>
